<template>
  <div v-show="visible">
    <div id="main">
      <el-form ref="userInfo" :model="data"  label-position="left" >
        <el-row v-if="data!=null">
          <el-col span="18"  class="text-center p-tb10">
            <el-upload  id="imageUpload"
                        action="string"
                        :show-file-list="false"
                        list-type="picture"
                        :before-upload="beforeAvatarUpload"
                        :on-remove="handleRemove"
                        :on-preview="handlePictureCardPreview"
                        :http-request="submitUpload">
              <img v-if="data.headImage" :src="proAPI.RESOURCE_URL+data.headImage" class="el-upload--picture">
              <img v-else :src="defaultImage" />
            </el-upload>
            <div class="p-tb10"><el-tag  size="small">{{data.userName}}</el-tag></div>
          </el-col>
          <el-col span="6" offset="2">
            <el-form-item :label-width="formLabelWidth" prop="nickName" label="昵称">
              <el-input placeholder="昵称"
                        v-model="data.nickName">
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" :rules="[
                      { required: true, message: '必须选择一项'}
                    ]" prop="sex" label="性别">
              <el-select v-model="data.sex" placeholder="请选择">
                <el-option v-for="(x,index) in actions" :key="index"  :label="x.name" :value="x.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
                          prop="desc"  label="简介">
              <el-input type="text" v-model.trim="data.desc" auto-complete="off" clearable>
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
                          prop="email" label="Email">
              <el-input type="text" v-model.trim="data.email" auto-complete="off" clearable>
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
                          prop="state"  label="账号状态">
              <el-switch
                v-model="data.state==0"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
              >
              </el-switch>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth"
              prop="currentLoginTime"
              label="本次登陆">
              <el-input type="text" v-model.trim="data.currentLoginTime" auto-complete="off" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col span="6" offset="2">
            <el-form-item :label-width="formLabelWidth"
                          prop="mobile" label="手机号">
              <el-input type="text" v-model.trim="data.mobile" auto-complete="off" clearable>
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
                          prop="age" label="年龄" >
              <el-input-number style="text-align: left" v-model="data.age"
                               :controls="0==1" :min="1" :max="150" auto-complete="off" clearable></el-input-number>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
                          prop="qq" label="QQ">
              <el-input type="text" v-model.trim="data.qq" auto-complete="off" clearable>
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
                          prop="address" label="地址">
              <el-input type="text" v-model.trim="data.address" auto-complete="off" clearable>
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
              prop="createTime" label="注册时间">
              <el-input type="text" v-model.trim="data.createTime" auto-complete="off" disabled>
              </el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth"
              prop="lastLoginTime" label="上次登陆">
              <el-input type="text" v-model.trim="data.lastLoginTime" auto-complete="off" disabled>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col span="18"  class="text-center">
            <el-button style="min-width:200px;" type="primary" @click="submitForm('userInfo')">保 存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <van-actionsheet
      v-model="actionshow"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>
<script>
  import defaultImage from '../../../../static/img/defaultHead.jpg';
  export default {
    data() {
      return {
        formLabelWidth:"80px",
        defaultImage:defaultImage,
        visible: false,
        actionshow:false,
        actions: [
          {name: '男', value:1},
          {name: '女', value: 2},
          {name: '保密',value: 0}
        ],
        popshow: false,
        data:null
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap", {
          "target": this.proAPI.URLS.getMemberUserBaseInfoVo,
          lock: 1
        });
        this.proAPI.getJson(this.proAPI.URLS.getMemberUserBaseInfoVo).then((res) => {
          this.$store.commit("saveUser", res.data);
          console.log(res.data);
          this.data = this.proUtil.base64decode(res.data);
        }).catch(()=>{
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("saveLoadingMap", {
              "target": this.proAPI.URLS.modifyMemberUserBaseInfo,
              lock: 1
            });
            this.proAPI.postJson(this.proAPI.URLS.modifyMemberUserBaseInfo, this.data).then((res) => {
              this.$store.commit("saveUser", this.proUtil.base64encode(JSON.stringify(this.data)));
              this.data = this.$store.getters.getUserInfo;
              this.proUtil.msgSuccess(res.message);
            }).catch(() => {
            })
          }
        });
      },
      showSexChoose(){
        this.actionshow = true;
      },
      onSelect(item){
        console.log(item);
        this.actionshow = false;
        this.data.sex = item.value;
      },
      beforeRead(){
        if(window.webViewJs2Java){
          alert(33);
          console.log("如果是android移动端暂时不处理");
          return;
        }else{
          alert(333);
        }
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.$message.error('图片格式只能是 JPG或者PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过 2MB!');
        }
        return (isJPG||isPNG) && isLt2M;
      },
      submitUpload(item) {
        let formData = new FormData();
        formData.append('file', item.file);
        this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.uploadSingleHeadImage,id:this.target});
        this.proAPI.postFile(this.proAPI.URLS.uploadSingleHeadImage, formData).then(res => {
          this.data.thumbNailImage = res.data.thumbNailImagePath;
          this.data.headImage = res.data.imagePath;
        })
      },
      // onRead(file) {
      //   console.log(file);
      //   let formData = new FormData();
      //   formData.append('file', file.file);
      //   this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.uploadSingleHeadImage,id:this.target});
      //   this.proAPI.postFile(this.proAPI.URLS.uploadSingleHeadImage, formData).then(res => {
      //     this.data.thumbNailImage = res.data.thumbNailImagePath;
      //     this.data.headImage = res.data.imagePath;
      //   }).catch(()=>{
      //   })
      // },
      oversize(msg){
        this.proUtil.msgWarning('图片大小不能超过 2MB!');
      }
    },
    beforeCreate: function () {
    },
    created: function () {
    },
    beforeMount: function () {
    },
    mounted: function () {
      setTimeout(() => {
        this.init();
        this.visible = true;
      }, 500)
    },
    beforeUpdate: function () {
    },
    updated: function () {
    },
    activated: function () {
    },
    deactivated: function () {
    },
    beforeDestroy: function () {
    },
    destroyed: function () {
    },
    errorCaptured: function (err, vm, info) {
    }
  }
</script>
<style scoped lang="scss">
  #imageUpload {
    img {
      background-color: #fbfdff;
      border-radius: 50%;
      box-sizing: border-box;
      width: 84px;
      height: 84px;
      line-height: 64px;
      vertical-align: top;
    }
  }

  #main {
    /deep/ .el-input-group__append {
      background-color: #409EFF;
      border-color: #409EFF;
      color: #ffffff;
      padding: 0;
      border: 0;
    }
    /deep/ .el-input-group__prepend {
      background-color: #409EFF;
      border-color: #409EFF;
      color: #ffffff;
    }
  }
</style>
